<template>
  <div class="toppart">
        <div class="topbar">
          <div class="container">
            <div class="top1">
            <nuxt-link to="/222" > 首页</nuxt-link>
            <nuxt-link to="/download" >封面故事</nuxt-link>
            <nuxt-link to="/" class="active"> 龙源文库</nuxt-link>
            <nuxt-link to="/download"  >套餐专区</nuxt-link>
            <div class="fr">

<!-- 注册 -->
<div class="zc_dl hand" v-show="!isLogin" @click="gozhuce">注册</div>

<!-- 登录 -->
<div class="zc_dl hand" v-show="!isLogin"  @click="godenglu">登录</div>

<!-- 已登录 -->

               <div class="avatar" @click="openset" v-show="isLogin">
                 <img src="../assets/images/r-1.png" >
                 <div class="info" v-show="isSet">
                   <li @click="toHome()">我的主页</li>
                   <li @click="accountSetting()">账号设置</li>
                   <li @click="loginOut()">安全退出</li>
                 </div>
               </div>
            </div>

            </div>
          </div>
        </div>

        <div class="bg-logopart1">
         <div class="container">
          <div class="top2">
           <span class="top2-1"><img src="../assets/images/top2-logo.png"></span>
           <span class="top2-2">

            <el-input placeholder="请输入内容" v-model="input5" class="input-with-select">
              <el-select v-model="select" slot="prepend" placeholder="智能检索" prefix-icon="el-icon-search" style="width:120px;">
                <el-option label="智能检索" value="1"></el-option>
                <el-option label="高级检索" value="2"></el-option>
              </el-select>
              <el-button slot="append" style="background-color:#0084ff; color:#f0f3f5">搜索</el-button>
            </el-input>

          </span>
           <span class="top2-3"><img src="../assets/images/top2-zhengban.png"></span>
           <span class="top2-4"><img src="../assets/images/top2-zhuanye.png"></span>

          </div>
        </div>
      </div>

<!-- 提示信息 -->
<div class="tipinfo" v-show="isTip">{{tipword}}</div>

<!-- 注册部分 -->
<div class="mask" v-show="zhuce">
  <div class="box">
     <div class="wenku hand" @click="closeWindow"></div>
    <div class="wenkudec">5000+媒体的知识发现平台</div>

    <div class="inputbox">
      <input type="text" class="inputtext" v-model="phone_zc" placeholder="请输入手机号">
    </div>
    <div class="inputbox">
        <input type="password" class="inputtext" v-model="yzcode" placeholder="请输入验证码">
          <div class="yanzheng hand" @click="sendCode(1)">发送验证码</div>
    </div>


    <div class="gap70"></div>
    <div class="wkbtn" @click="login(1)">注册</div>
     <div class="wktip">注册即代表同意《文库协议》《隐私保护指引》</div>


    <div class="wkbottom">已有账号？<a @click="linkdenglu" class="hand">登录</a></div>
  </div>
</div>

<!-- 密码登录部分 -->
<div class="mask" v-show="denglu">
  <div class="box">
    <div class="wenku hand" @click="closeWindow"></div>
    <div class="wenkudec">5000+媒体的知识发现平台</div>
    <div class="inputbox">
      <input type="text" class="inputtext" v-model="phone_dl" placeholder="请输入手机号">
    </div>
    <div class="inputbox">
        <input type="text" class="inputtext" v-model="password_dl" placeholder="请输入密码">
    </div>

    <div class="gap70"><span @click="yzlogin" class="hand">手机验证码登录</span>  <div class="fr hand" @click="forgetpass">忘记密码</div></div>
    <div class="wkbtn">登录</div>
    <div class="wktip1">社交账号登录
      <span @click="getQrCode(3)"><img src="../assets/images/icon-weibo.png" height="27"  width="27" alt=""/></span>
      <span @click="getQrCode(2)"><img src="../assets/images/icon-qq.png" height="27" width="27" @click="getQrCode(2)" alt=""/></span>
      <span @click="getQrCode(1)"><img src="../assets/images/icon-weixin.png" height="27"  width="27" alt=""/></span>
    </div>
    <div class="wkbottom">没有账号？<a @click="linkzhuce" class="hand" >注册</a></div>
  </div>
</div>

<!-- 验证码登录部分 -->
<div class="mask" v-show="yzdenglu">
  <div class="box">
    <div class="wenku hand" @click="closeWindow"></div>
    <div class="wenkudec">5000+媒体的知识发现平台</div>
    <div class="inputbox">
      <input type="text" class="inputtext" v-model="phone_dllogin" placeholder="请输入手机号">
    </div>
    <div class="inputbox">
        <input type="password" class="inputtext" v-model="yzcodelogin" placeholder="请输入验证码">
          <div class="yanzheng hand">发送验证码</div>
    </div>

    <div class="gap70"><span @click="passlogin" class="hand">密码登录（手机号或邮箱）</span> </div>
    <div class="wkbtn" @click="login(2)">登录</div>
    <div class="wktip1">社交账号登录
      <span @click="getQrCode(3)"><img src="../assets/images/icon-weibo.png" height="27"  width="27" alt=""/></span>
      <span @click="getQrCode(2)"><img src="../assets/images/icon-qq.png" height="27" width="27" @click="getQrCode(2)" alt=""/></span>
       <span @click="getQrCode(1)"><img src="../assets/images/icon-weixin.png" height="27"  width="27" alt=""/></span>
    </div>
    <div class="wkbottom">没有账号？<a @click="linkzhuce" class="hand">注册</a></div>
  </div>
</div>
<!-- 忘记密码 -->
<div class="mask" v-show="forget">
<!-- 忘记密码 第一步 -->
    <div class="forgetbox" v-show="step1">
      <div class="close" @click="closeWindow"></div>
      <div class="fftitle">找回密码</div>
      <div class="ffdec">验证码将会发送至你的注册邮箱或手机</div>
      <div class="ffbox">
        <input type="text" class="ffinputtext" v-model="ffaccount" placeholder="手机号或邮箱">
      </div>
      <div class="ffnextbtn hand" @click="goStep2">下一步</div>
    </div>
<!-- 忘记密码 第二步 -->
    <div class="forgetbox" v-show="step2">
      <div class="close" @click="closeWindow"></div>
      <div class="fftitle">找回密码</div>
      <div class="ffdec">验证码将会发送至你的注册邮箱或手机</div>
       <div class="ffbox">
         <div class="ffinputtext">123456789</div>
         <div class="ffyanzheng hand" @click='goStep1'>修改</div>
       </div>
      <div class="ffbox">
        <input type="text" class="ffinputtext" v-model="step2code" maxlength="6" placeholder="请输入6位短信验证码">
         <div class="ffyanzheng hand">发送验证码</div>
      </div>
      <div class="ffnextbtn hand" @click="goStep3">下一步</div>
    </div>


 <!-- 忘记密码 第三步 -->
    <div class="forgetbox" v-show="step3">
      <div class="close" @click="closeWindow"></div>
      <div class="fftitle">设置新密码</div>
      <div class="ffdec">新密码应不少于8位，且不可与之前的设置过得密码重复</div>
       <div class="ffbox">
          <input type="text" class="ffinputtext" v-model="newpass" placeholder="新密码">
       </div>
      <div class="ffbox">
        <input type="text" class="ffinputtext" v-model="newpassagain" placeholder="再次输入新密码">
      </div>
      <div class="ffnextbtn hand" @click="goStep4">下一步</div>
    </div>
<!-- 忘记密码 第四步 -->
    <div class="forgetbox" v-show="step4">
          <div class="ffok">设置成功</div>
<div class="ffnextbtn hand" @click="godenglu">完成</div>
    </div>

 </div>


  </div>
</template>
<script>
  import axios from 'axios'
  import qs from 'qs'
  export default {
    data: () => ({
    isSet: false,
    input5:'',
    select:'',
    isLogin:false,
    zhuce:false,
    denglu:false,
    yzdenglu:false,
    phone_dl:'',
    phone_dllogin:'',
    phone_zc:'',
    yzcode:'',
    password_dl:'',
    yzcodelogin:'',
    // 提示
    isTip:false,
    tipword:'',

    //忘记密码
    forget:false,
    step1:false,
    step2:false,
    step3:false,
    step4:false,
    step2code:'',
    ffaccount:'',
    newpass:'',
    newpassagain:'',


  }),created(){
       // console.log(window.location.href)
      // var user=JSON.parse(localStorage.getItem("user"));
      // if(!(user!=null && user!="" && user!=undefined)){
      //   this.isLogin=true;
      // }

    },
    methods:{
      getQrCode(logintype){
        axios.post('https://wenku.qikan.com:11000/admin/lib/authorizationredirect.html',qs.stringify({'loginType':logintype})
        )
          .then((response)=>{
            console.log(response.data);
            let result= response.data;
            window.location.href=result;
          })
          .catch((error)=>{
            console.log(error)
          })
      },
      sendCode(type) {
        var mobilereg = /^1[34578]\d{9}$/;
        var phone='';
        if(type==1){//注册
          alert(type);
          if (this.phone_zc == null || this.phone_zc == "" || this.phone_zc == 'undefined') {
            this.tipshow("手机号不能为空!");
            return false;
          } else if (!mobilereg.test(this.phone_zc)) {
            this.tipshow("手机格式不正确");
            return false;
          }
          phone=this.phone_zc;
        }else if(type==2){//登录
          if (this.phone_dllogin == null || this.phone_dllogin == "" || this.phone_dllogin == 'undefined') {
            this.tipshow("手机号不能为空!");
            return false;
          } else if (!mobilereg.test(this.phone_dllogin)) {
            this.tipshow("手机格式不正确");
            return false;
          }
          phone=this.phone_dllogin;
        }
          axios.post('https://wenku.qikan.com:11000/admin/lib/sendmsg.html',qs.stringify({'mobile':phone})
          )
            .then((response)=>{
              console.log(response.data);
              let result= response.data;
              if(result.code==1)
              {
                this.tipshow("验证码发送成功");
                this.start1 = true;
              }
            })
            .catch((error)=>{
              console.log(error)
            })

      },
      login(type){

        var mobilereg = /^1[34578]\d{9}$/;
        var phone='';
        if(type==1){//注册
          if (this.phone_zc == null || this.phone_zc == "" || this.phone_zc == undefined) {
            this.tipshow("手机号不能为空!");
            return false;
          } else if (!mobilereg.test(this.phone_zc)) {
            this.tipshow("手机格式不正确");
            return false;
          }else if(this.yzcode==null || this.yzcode =="" || this.yzcode == undefined || this.yzcode.length!=4){
            this.tipshow("验证码为空或长度不正确！");
            return false;
          }
          phone=this.phone_zc;

          axios.post('https://wenku.qikan.com:11000/admin/lib/mobileRegister.html',qs.stringify({'mobile':phone,'validcode':this.yzcode})
          )
            .then((response)=>{
              console.log(response.data);
              let result= response.data;
              if(result.code==1)
              {
                this.tipshow("注册成功，请登录！");
                this.cancelRegister();
              }else{
                this.tipshow("注册失败");
              }


            })
            .catch((error)=>{
              console.log(error);
              this.tipshow(error.message);
            })

        }else if(type==2){//登录
          alert(type);
          if (this.phone_dllogin == null || this.phone_dllogin == "" || this.phone_dllogin == 'undefined') {
            this.tipshow("手机号不能为空!");
            return false;
          } else if (!mobilereg.test(this.phone_dllogin)) {
            this.tipshow("手机格式不正确");
            return false;
          }else if(this.yzcodelogin==null || this.yzcodelogin =="" || this.yzcodelogin == undefined || this.yzcodelogin.length!=4){
            this.tipshow("验证码为空或长度不正确！");
            return false;
          }
          phone=this.phone_dllogin;
          axios.post('https://wenku.qikan.com:11000/admin/lib/validcodeLogin.html',qs.stringify({'mobile':phone,'validcode':this.yzcodelogin})
          )
            .then((response)=>{
              console.log(response.data);
              let result= response.data;
              if(result.code==1)
              {
                this.tipshow("登录成功！");
                localStorage.removeItem("user");
                localStorage.setItem("user", JSON.stringify(result.data));
                this.isLogin=true;
                this.cancelLogin();

              }else{
                this.tipshow(result.message);
              }


            })
            .catch((error)=>{
              console.log(error);
              this.tipshow(error.message);
            })

        }

      },
      openset(){
        this.isSet=!this.isSet;
      },
      godenglu(){
          this.denglu=true;
          this.step4=false;
          this.forget=false;
      },
      cancelLogin(){
        this.yzdenglu=false;
      },
      gozhuce(){
        this.zhuce=true;
      },
      cancelRegister(){
        var t=setTimeout(2000);
        this.zhuce=false;
      },
      linkdenglu(){
        this.denglu=true;
        this.zhuce=false;
      },
      linkzhuce(){
        this.yzdenglu=false;
        this.denglu=false;
        this.zhuce=true;
      },
      yzlogin(){
       this.yzdenglu=true;
       this.denglu=false;
      },
      passlogin(){
       this.yzdenglu=false;
       this.denglu=true;
      },


      closeWindow(){
        this.yzdenglu=false;
        this.denglu=false;
        this.zhuce=false;
        this.forget=false;
        this.step1=false;
        this.step2=false;
        this.step3=false;
        this.step4=false;
      },
//忘记密码
      forgetpass(){
        this.forget=true;
        this.denglu=false;
        this.step1=true;
      },
      goStep1(){
        this.step2=false;
        this.step1=true;
      },
      goStep2(){
        this.step1=false;
        this.step2=true;
      },
      goStep3(){
        this.step2=false;
        this.step3=true;
      },
      goStep4(){
        this.step3=false;
        this.step4=true;
      },


      tipshow(e){
        this.tipword=e;
        this.isTip=true;
        setTimeout(() => {
           this.tipword='';
           this.isTip=false;
       }, 2000);
    },


    },
  }

</script>
<style scoped>
.tipinfo{position: fixed; z-index: 9999; top: 50%; left: 50%; width: 400px;  height: 40px;border-radius: 10px; margin-left: -200px; margin-top: -20px; line-height: 40px;text-align: center;color: #fff; font-size: 14px; background-color: rgba(50,50,50,0.8)}


.topbar{ width: 100%; height: 54px;background-image: linear-gradient(-180deg, #086ED4 0%, #0767C7 50%, #065DB5 100%, rgba(0,0,0,0.50) 100%);
box-shadow: 0 2px 4px 0 rgba(77,77,77,0.50);}
.bg-logopart1{ width: 100%; height: 86px; background: #fff;}

.top1{ width: 100%; height: 54px; line-height: 54px; }
.avatar{width: 31px; height: 54px; padding-top: 12px; position: relative; display: inline-block;}
.avatar img{ width: 31px; height: 31px; }
.avatar .info{ position: absolute; z-index: 100; width: 173px; height: 140px; padding: 10px 0; top: 35px;  right: 0px; background-color: #fff; }
.avatar .info li{ width: 100%; height: 40px; line-height: 40px; text-align: center; cursor: pointer; }
.avatar .info li:hover{ background-color: #f5f5f5;}

.top2{ width: 100%; height: 86px; padding: 18px 0 28px; line-height: 40px; }
.top2-1{ width: 268px; height: 40px;  display: inline-block; margin-right: 32px;}
.top2-1 img{ width: 268px; height: 40px;  display: inline-block; vertical-align: middle;}
.top2-2{ width: 600px; height: 40px;  display: inline-block; margin-right: 21px; background-color: #cde;}
.top2-3{ width: 100px; height: 40px;  display: inline-block; margin-right: 0px;}
.top2-4{ width: 100px; height: 40px;  display: inline-block; }
.top2-3 img,.top2-4 img{ width: 100px; height: 40px;  display: inline-block; vertical-align: middle;}


a{color:#f0f3f5; text-decoration: none; font-size: 16px; padding:0 15px;}
.active{ background: #0560B7;box-shadow: inset 0 0 1px 0 rgba(79,79,79,0.50); height: 52px; display: inline-block; color: #f0f3f5; }

.zc_dl{ width: 75px; height: 35px;background: #0D78E7;border: 1px solid #055BB2;box-shadow: inset 0 1px 1px 0 #368EF2;border-radius: 3px; line-height: 33px; text-align: center;font-size: 16px; display: inline-block; color:#fff; margin-left: 30px;}

/* 注册登录部分 */

.mask{ width: 100%; height: 100%; background: rgba(24,24,24,0.50); position: fixed;z-index: 999; left: 0; top: 0; }
.box{ position: fixed; z-index:1000; width: 500px; height: 575px; left: calc( 50% - 250px ); top :50% ;margin-top:-288px;text-align:center; background-color: #fff; padding: 0 46px;}

.wenku{font-size: 78px;color: #0084FF; height: 93px; margin-top:32px; clear: both; background: url('../assets/images/wenkulogo.png') center center no-repeat; background-size: 231px 74px; position: relative;}
.wenku:after{content: '';position: absolute;top: -15px; right: -15px; width: 32px; height: 32px; background: url('../assets/images/icon-close.png') center center no-repeat; background-size: 14px 14px; }

.wenkudec{font-size: 24px;color: #0084FF;letter-spacing: 2px;line-height: 33px;clear: both;}
.wkbottom{ height: 67px; width: 100%;background: #F6F6F6;line-height: 67px;font-size: 18px; color: #131313;position: absolute; z-index:1001; left:0; bottom:0;}
.wkbottom a{color:#175199;}
.inputbox{ height: 67px; border-bottom: 1px solid #ebebeb; padding: 24px 0 10px; width: 100%; position: relative; }
.inputbox .inputtext{ width: 100%; line-height: 32px; height: 32px; outline: none; border: none; color: #8590A6; text-align: left; }
.inputbox .yanzheng{position: absolute;z-index: 1001; top:26px; right:0;color: #175199;}

.wktip{font-size: 16px;color: #8590A6;letter-spacing: 0.7px;text-align: center; margin-top:20px;}
.wktip1{font-size: 16px;color: #8590A6;letter-spacing: 0.7px;text-align: left; margin-top:20px; width: 100%;}
.wktip1 a{ text-align: right; float: right; }
.wkbtn{background: #0084FF;border-radius: 3px; width: 100%; height: 42px; line-height: 42px; color:#fff;font-size: 16px;}
.gap70{ width: 100%; height: 70px; clear: both;padding-top:20px;text-align: left; font-size: 16px;color: #175199;}

/* 忘记密码 */
.forgetbox{ width: 380px; height: auto; overflow: hidden; position: fixed; z-index:1000; left: calc( 50% - 190px ); top: calc( 50% - 200px ); background-color: #fff; padding: 10px 40px 24px 36px;}
.forgetbox .close{ position: absolute;z-index: 1001; width: 32px; height: 32px; background: url('../assets/images/icon-close.png') center center no-repeat; background-size: 14px 14px; top:0; right:0;}

.ffnextbtn{width: 100%; height: 40px; line-height: 40px; background-color: #0084FF;border-radius: 3px;font-size: 14px; color: #fff; text-align: center;margin-top:60px;}
.fftitle{ width: 100%; line-height: 30px; font-size: 16px; color: #1a1a1a; font-weight: 600; }
.ffdec{width: 100%; line-height: 18px; font-size: 12px; color: #8590A6;}
.ffbox{ height: 60px; border-bottom: 1px solid #ebebeb; padding: 24px 0 10px; width: 100%; position: relative; }
.ffbox .ffinputtext{ width: 100%; line-height: 28px; height: 28px; outline: none; border: none; color: #8590A6; text-align: left; }
.ffbox .ffyanzheng{position: absolute;z-index: 1001; top:23px; right:0;color: #175199;}
.ffok{border: 1px solid #EBEBEB;border-radius: 3px;height: 40px; line-height: 40px; width: 100%;font-size: 16px;color: #1a1a1a; text-align: center;}
.ffok img{ width: 20px; height: 20px; vertical-align: middle; margin-right: 10px; display: inline-block; }

</style>
